/**
 * 租户单选弹窗
 */
<template>
<vp-dialog ref="editDialogRef" :span="1">
    <template #title>
        <vp-label zh="选择机构" en="Choose Organization"/>
    </template>
    <vp-card class="mb5">
        <el-form ref="searchFormRef" :model="searchForm" @submit.prevent
            @keyup.enter="handleSearch" label-width="120px">
            <vp-search-row>
                <!-- <vp-search-col :span="2">
                    <el-form-item prop="keyword">
                        <template #label><vp-label zh="机构" en="Organization"/></template>
                        <el-input v-model="searchForm.keyword" v-trim></el-input>
                    </el-form-item>
                </vp-search-col> -->
                <vp-search-col btn-col>
                    <vp-btn-search :loading="loading" @click="handleSearch"/>
                    <vp-btn-reset @click="handleSearchReset"/>
                </vp-search-col>
            </vp-search-row>
        </el-form>
    </vp-card>
    <vp-card v-loading="loading">
        <vp-table 
            :data="tableData" 
            highlight-current-row 
            ref="singleTable" 
            @current-change="handleCurrentChange" 
            @sort-change="handleSortChange"
            :height="`calc(100vh - 450px)`"
            default-expand-all
            style="width: 100%" row-key="id">
            <el-table-column align="center" label="#" type="index">
            </el-table-column>
            <el-table-column prop="dprtcode" sortable="custom" show-overflow-tooltip>
                <template #header><vp-label zh="编码" en="Code"/></template>
                <template #default="scope">
                    <span v-html="markTextColor(searchForm.keyword, scope.row.dprtcode)" />
                </template>
            </el-table-column>
            <el-table-column prop="dprtname" sortable="custom" show-overflow-tooltip>
                <template #header><vp-label zh="名称" en="Name"/></template>
                <template #default="scope">
                    <span v-html="markTextColor(searchForm.keyword, scope.row.dprtname)" />
                </template>
            </el-table-column>
        </vp-table>
    </vp-card>
    <template #footer>
        <vp-btn-empty  @click="handleClear"/>
        <vp-btn-confirm  @click="handleSave"/>
    </template>
</vp-dialog>
</template>
<script lang="ts">
import { defineComponent, reactive, ref, toRefs, watch } from 'vue';
import request from '/@/utils/request';
import {markTextColor} from '/@/utils/toolsValidate';
export default defineComponent({
    name: "vpTenantDialog",
    emits:["confirm"],
    setup(props, context) {
        const state = reactive({
            searchForm: {
				keyword: "",
                id: "",
			},
            page: {
				total: 0, // 总条数
				pageNum: 1, // 当前页
				pageSize: 10, // 分页大小
				sortColumn: "",
				sortOrder: ""
			},
			tableData: [],
            selectedId: "",
            currentRow : null,
            loading: false
		});
        const editDialogRef = ref();
        const searchFormRef = ref();
        const singleTable = ref();

        const handleOpen = (param: any)=>{
            editDialogRef.value.handleOpen();
            state.selectedId = param.selectedId;
            state.searchForm.id = param.id;
            loadDataList();
        }

        const loadDataList = () => {
			state.loading = true;
			request.get('/system/tenant/list', {
				params: {
					...state.searchForm,
					...state.page,
				}
			}).then(res => {
				state.tableData = res?.data || [];

                const list = state.tableData.filter((obj)=>{return obj.id === state.selectedId});
                if (list.length > 0) {
                    singleTable.value.setCurrentRow(list[0]);
                }
 			}).finally(()=>{
				state.loading = false
			})
		}

        watch(()=>state.page.pageNum, ()=>{
			loadDataList()
		})

        const handleCurrentChange = (val: any) => { 
            state.currentRow  = val;
        }

        const handleSave = () => {
            if(state.loading){
                return;
            }
            context.emit("confirm", state.currentRow);
            editDialogRef.value.handleClose();
        }
        const handleClear = () => {
            if(state.loading){
                return;
            }
            context.emit("confirm", {});
            editDialogRef.value.handleClose();
        }

        const handleSearch = ()=>{
            if(state.page.pageNum == 1){
				loadDataList();
			}else{
				state.page.pageNum = 1
			}
		}

        const handleSearchReset = () => {
            searchFormRef.value.resetFields();
        }

        const handleSortChange = (column: any) => {
            state.page.sortColumn = column.prop;
            state.page.sortOrder = column.order == 'descending' ? 'desc' : 'asc'
            loadDataList();
        }

        return {
            ...toRefs(state),
            searchFormRef,
            handleSave,
            editDialogRef,
            handleOpen,
            handleCurrentChange,
            singleTable,
            markTextColor,
            handleSearch,
            handleSearchReset,
            handleSortChange,
            handleClear,
        }
    },
})
</script>
